<template>
  <div class="white-box">
    <div class="task-one">
      <div class="task-one__item">
        <span class="task-one__label">提现方式：</span>
        <el-select v-model="searchParams.type" placeholder="请选择变动类型" clearable>
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.type"
                     :key="index"/>
        </el-select>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">提现状态：</span>
        <el-select v-model="searchParams.withdrawalStatus" placeholder="请选择提现状态" clearable>
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.withdrawalStatus"
                     :key="index"/>
        </el-select>
      </div>

      <div class="task-one__btn">
        <el-button type="primary" :loading="searchBtnLoading" :icon="Search"
                   @click="handleSearch">搜索</el-button>
        <el-button type="success" :loading="importDataBtnLoading" @click="importData('withdrawal/export-list-withdrawal')"
                   :icon="Download">导出</el-button>
      </div>
    </div>
    <el-table class="table-mb" v-loading="loading" :data="list" :header-cell-style="{ background: '#F5F7FA' }"
              element-loading-background="rgba(255, 255, 255, 0.6)" row-key="sid" @select="handleSelected" @select-all="handleAllSelected">
<!--      <el-table-column type="selection" width="55" />-->
      <el-table-column prop="code" label="提现编号"></el-table-column>
      <el-table-column prop="type" label="提现方式" width="120">
        <template #default="{ row }">
          <!--提现方式：0=支付宝，1=银行卡-->
          <el-tag type="primary" v-if="row.type === 0">支付宝</el-tag>
          <el-tag type="danger" v-if="row.type === 1">银行卡</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="user" label="用户" min-width="140">
        <template #default="{ row }">
          <div style="display: flex;align-items: center;" v-if="row.user">
            <el-avatar :size="40" :src="proxy.imgUrl + row.user.avatar">
              <img :src="defaultAvatar"/>
            </el-avatar>
            <div style="margin-left: 10px">
              <div><el-text type="info">昵称：</el-text>{{row.user.nickName}}</div>
              <div><el-text type="info">手机号：</el-text>{{row.user.phone}}</div>
            </div>
          </div>

        </template>
      </el-table-column>
      <el-table-column prop="type" label="账号" width="300">
        <template #default="{ row }">
          <div>
            <div> <el-text type="info">{{row.type === 0?'支付宝账号':'银行卡号'}}：</el-text>{{row.account}}</div>
            <div v-if="row.type == 1"> <el-text type="info">开户行：</el-text>{{row.bank}}</div>
            <div> <el-text type="info">姓名：</el-text>{{row.name}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="提现总额" width="100"></el-table-column>
      <el-table-column prop="serviceCharge" label="手续费" width="100"></el-table-column>
      <el-table-column prop="actually" label="实际到账" width="100"></el-table-column>
      <el-table-column prop="note" label="备注"></el-table-column>
      <el-table-column align="center" prop="withdrawalStatus" label="提现状态" width="100">
        <template #default="{ row }">
          <el-text v-if="row.withdrawalStatus === 1" type="success">已审核</el-text>
          <el-text v-else-if="row.withdrawalStatus === 2" type="danger">已拒绝</el-text>
          <el-text v-else-if="row.withdrawalStatus === 0" type="warning">待审核</el-text>
          <el-text v-else type="info"></el-text>
        </template>
      </el-table-column>

      <el-table-column prop="created" label="创建时间" width="160"> </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button link type="success" @click="handleUpdateStatus(row,1)" v-if="row.withdrawalStatus === 0">发放</el-button>
          <el-button link type="danger" @click="handleUpdateStatus(row,2)" v-if="row.withdrawalStatus === 0">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="pageSizeNum"
        :total="totalNums"
        layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <el-dialog v-model="dialogStatusShow" :title="dialogStatusParams.status === 1?'发放':'驳回'" width="660px" :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" @close="closeDialogStatus">
      <el-form ref="dialogStatusFormRef" :model="dialogStatusForm" :rules="dialogStatusFormRules" label-width="150px" style="width: 550px">
        <el-form-item label="提现编号">
          <el-text type="info" tag="b">{{dialogStatusParams.row.code}}</el-text>
        </el-form-item>
        <el-form-item label="提现方式">
          <el-tag type="primary" v-if="dialogStatusParams.row.type === 0">支付宝</el-tag>
          <el-tag type="danger" v-if="dialogStatusParams.row.type === 1">银行卡</el-tag>
        </el-form-item>
        <el-form-item label="提现总额">
          <el-text type="info" tag="b">{{dialogStatusParams.row.total}}</el-text>
        </el-form-item>
        <el-form-item label="手续费">
          <el-text type="info" tag="b">{{dialogStatusParams.row.serviceCharge}}</el-text>
        </el-form-item>
        <el-form-item label="实际到账">
          <el-text type="info" tag="b">{{dialogStatusParams.row.actually}}</el-text>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model.trim="dialogStatusForm.note" clearable placeholder="请输入备注"/>
        </el-form-item>
        <el-form-item>
          <div class="flexs">
            <el-button type="primary" :loading="dialogStatusParams.loading" @click="submitDialogStatusForm(dialogStatusFormRef)">
              确认{{dialogStatusParams.status === 1?'发放':'驳回'}}
            </el-button>
            <el-button @click="resetDialogForm(dialogStatusFormRef)">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <go-back/>
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRouter
} from "vue-router"
import {
  CirclePlus, Download, Search
} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import * as ElementPlusIconsVue from "@element-plus/icons-vue"


const router = useRouter()
const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  list,
  dialogFormRef,
  dialogShow,
  dialogForm,
  dialogParams,
  handleSearch,
  getData,
  handleAdd,
  handleEdit,
  resetDialogForm,
  handleAllSelected,
  handleSelected,
  selectedIds,
  submitDialogForm,
  closeDialog,
  handleAction,
  handleDelete,
  sortFieldName,
  importDataBtnLoading,
  importData
} = listMixins()

apiPath.value = '/withdrawal/all';
// sortFieldName.value = 'createdMilli'
const selectOptions = reactive({
  type:[
    {label:'支付宝',value:0},
    {label:'银行卡',value:1},
  ],
  withdrawalStatus:[
    {label:'待审核',value:0},
    {label:'已审核',value:1},
    {label:'已拒绝',value:2},
  ]
})

const dialogStatusShow = ref(false)
const dialogStatusForm = reactive({
  note:''
})
const dialogStatusFormRules = reactive({})
const dialogStatusFormRef = ref(null)
const dialogStatusParams = reactive({
  type: '',// add:创建  edit：编辑
  loading: false,
  data:{}, //提交的其他参数，不在表单编辑内
  row:{},//触发的行数据
})
const handleUpdateStatus = (row,status) => {
  dialogStatusShow.value = true
  dialogStatusParams.status = status;
  dialogStatusParams.row = row || {}
}
const closeDialogStatus = () => {
  dialogStatusShow.value = false
  resetDialogForm(dialogStatusFormRef.value)
}
const submitDialogStatusForm = (formEl) =>{
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      dialogStatusParams.loading = true;
      let data = {
        note:dialogStatusForm.note,
        sid:dialogStatusParams.row.sid,
        status:dialogStatusParams.status
      };
      proxy.$axios.put('withdrawal/update-status',data)
          .then((res) => {
            dialogStatusParams.loading = false
            if (res.data.code == 200) {
              closeDialogStatus()
              proxy.$message({
                message: `操作成功`,
                type: "success"
              })
              getData()
            } else {
              proxy.$message({
                message: res.data.msg,
                type: "error"
              })
            }
          })
          .catch((err) => {
            dialogStatusParams.loading = false
          })

    }

  })

}


onMounted(() => {
  getData()
})
</script>

<style lang="less">

</style>